<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jstl/fmt_rt" %>
<!DOCTYPE html>

<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width,initial-scale=1,user-scalable=0">
<title></title>
<link rel="stylesheet" href="/css/weui-for-work.min.css">
</head>

<body>

	<div class="page__hd">
		<div class="weui-cell">
			<h3 class="page__title">请假记录表 - ${username}</h3>
			<input style="display: none" value="${id}" id="userid" />
		</div>
	</div>
	<div class="page__bd">
		<s:forEach items="${list}" var="info">

			<div class="weui-cell weui-cell_swiped" onclick="view('${info.id}')">
				<div class="weui-cell__bd">
					<div class="weui-cell">
						<div class="weui-cell__bd">
							<p>
								<s:if test="${info.qingJiaTypeId==1083}">
								<s:out value="事假"></s:out>
								</s:if>
								<s:if test="${info.qingJiaTypeId==1084}">
								<s:out value="年假"></s:out>
								</s:if>
								<s:if test="${info.qingJiaTypeId==1085}">
								<s:out value="病假"></s:out>
								</s:if>
								&nbsp;
								<f:formatDate value="${info.startTime}" pattern="yyyy-MM-dd"/>--<f:formatDate value="${info.endTime}" pattern="yyyy-MM-dd"/>
								<span><s:out value="${info.days}"></s:out>天</span>
								
							</p>
						</div>
					</div>
				</div>

			</div>
	</div>
	

	</s:forEach>





	</div>





</body>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script>
  function view(id){
	  window.location.href = "/phone/viewDetail?id="+id;
  }

$('.weui-cell_swiped').swipeout();
      
      $('.delete-swipeout').click(function () {
        $(this).parents('.weui-cell').remove()
      })
      $('.close-swipeout').click(function () {
        $(this).parents('.weui-cell').swipeout('close')
      })
    </script>
<script type="text/javascript">



var ImgList = new Array();

$("#uploaderLi").change(function (e) {
    var tmpl, src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;
    
    //alert(ImgList.length);
    if ( ImgList.length>=3) {
    	alert("最多只能上传3张图片！");
    	return;
    }
    
    for (var i = 0, len = files.length; i < len; ++i) {
        var file = files[i];
        var temps = file.name.split('.');
        
        
        var extension = temps[temps.length - 1].toLowerCase();
        if (url) {
            src = url.createObjectURL(file);
        } else {
            src = e.target.result;
        }
        var newguid = NewGuid();
        
        //alert(src);
        //alert(newguid);

        tmpl = 
        	//$("<li id=\"" + newguid + "\" title=\"单击查看\" onclick=\"Show('" + src + "','" + file + "')\"  class=\"weui-uploader__file weui-uploader__file_status\" style=\"background-image:url(" + src + ");\">"
        	$("<li id=\"" + newguid + "\"  onclick=\"deletePic('" + newguid + "',this)\"  class=\"weui-uploader__file weui-uploader__file_status\" style=\"background-image:url(" + src + ");\">"
           + "<div class=\"weui-uploader__file-content\">50%</div>"
           //+ "<div title=\"删除\" onclick=\"deletePic('" + newguid + "',this)\" class=\"remove\" ><span  class=\"iconfont icon-remove\"></span></div>"
           + "</li>");
        tmpl.insertBefore("#uploaderLi");

        //构造上传器
        var louis = new LouisUpload(
        {
            uploadUrl: "/phone/weixinFilesUpload",
            file: files[i],
            guid: newguid,
            beforeSend: function (file, guid) {

            },
            uploading: function (percentage, guid) {
                $('#' + guid).find(".weui-uploader__file-content").text(percentage + "%");
            },
            callback: function (data, guid) {
            	var jsondata=JSON.parse(data);
                //alert(jsondata);
                //alert(jsondata.status);
                if (jsondata.status == 200) {
                    //$('#' + guid).removeClass().addClass("weui-uploader__file");//.attr("style","list-style:none");
                    //$('#' + guid).find(".weui-uploader__file-content").remove();
                    ImgList.push({ FileName: jsondata.message, Key: guid });
                    alert(jsondata.message);
                } else {
                    // $('#' + guid).find(".weui-uploader__file-content").html("<i class=\"weui-icon-warn\"></i>")
                    $('#' + guid).remove();
                }
            },


        });
        //开始上传
        try {
            louis.start();
        } catch (e) {
            $("<i class=\"weui-icon-warn\"></i>")
            .appendTo($('#' + guid).find(".weui-uploader__file-content"));
            $('#' + guid).find(".weui-uploader__file-content").text("上传错误");
        }
    }
})


function deletePic(guid, e) {
	if (confirm("确定要删除图片吗？") == false) {
        return;
    }   	
    $('#' + guid).remove();
    //debugger;
    for (var i = 0; i < ImgList.length; i++) {
        if (ImgList[i].Key == guid) {
        	
        	//alert(ImgList[i].FileName);
           
            $.ajax({
                type:'Post',
                url: "/phone/weixinFilesDelete",
                data: { fileName: ImgList[i].FileName },
                dataType: "text",
                success: function (data) {
                	var jsondata=JSON.parse(data);
                    //alert(jsondata);
                    //alert(jsondata.status);
                    if (jsondata.status == 200) {
                        alert("删除成功");
                    }
                }
            })
            ImgList.splice(i, 1);
            break;
        }
    }

    if (e && e.stopPropagation) {
        e.stopPropagation();
    }
    else {
        window.event.cancelBubble = true;
        return false;
    }

}
/** 
 * 格式化日期 
 * @param date 
 * @returns {String} 
 */  
function formatDateToString(date){  

    var year = date.getFullYear();  
    var month = date.getMonth()+1;  
    var day = date.getDate();  
    if(month<10) month = "0"+month;  
    if(day<10) day = "0"+day;  
    return year+month+day;  
}  
function formateDateAndTimeToString(date)  
{  
    var hours = date.getHours();  
    var mins = date.getMinutes();  
    var secs = date.getSeconds();  
    var msecs = date.getMilliseconds();  
    if(hours<10) hours = "0"+hours;  
    if(mins<10) mins = "0"+mins;  
    if(secs<10) secs = "0"+secs;  
    if(msecs<10) secs = "0"+msecs;  
    return formatDateToString(date)+hours+mins+secs+msecs;  
}  
function NewGuid() {
    var guid = "";
    /*
    for (var i = 1; i <= 32; i++) {
        var n = Math.floor(Math.random() * 16.0).toString(16);
        guid += n;
        if ((i == 8) || (i == 12) || (i == 16) || (i == 20))
            guid += "-";
    }
    */
    var userid=$("#userid").val();
    var rand = Math.floor(Math.random () * 900) + 100;
    
    guid =  userid + "-" + formateDateAndTimeToString(new Date()) +"-"+rand;
    
    return guid;
}

function LouisUpload(option) {
    var xhr = new XMLHttpRequest();

    //构造模式
    var uploadUrl, callback, uploading, beforeSend, guid;
    guid = option.guid;
    uploadUrl = option.uploadUrl;//上传地址
    callback = option.callback;//上传完成回调
    uploading = option.uploading;//上传进度回调
    beforeSend = option.beforeSend;//上传开始检查
    this.file = option.file;


    //开始上传命令
    this.start = function () {
        if (beforeSend instanceof Function) {
            if (beforeSend(this.file, guid) === false) {
                return false;
            }
        }
        var fd = new FormData();
        fd.append("guid", guid);
        fd.append("file", this.file);

        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                if (callback instanceof Function) {
                    callback(xhr.responseText, guid);
                }
            }
        }

        xhr.upload.onprogress = function (evt) {
            var loaded = evt.loaded;
            var tot = evt.total;
            var per = Math.floor(100 * loaded / tot );  //已经上传的百分比  

            if (uploading instanceof Function) {
                uploading(per, guid);
            }

        };

        xhr.open("post", uploadUrl);
        xhr.send(fd);
    };

}


function GetServiceFileName() {
    var tmpl = "";
    for (var i = 0; i < ImgList.length; i++) {
        tmpl += ImgList[i].FileName + ",";
    }
    alert(tmpl);
}


$(function(){
	  var max = 200;
	  $('#remark').on('input', function(){
	     var text = $(this).val();
	     var len = text.length;
	     $('#count').text(len);
	     if(len > max){
	       $(this).closest('.weui_cell').addClass('weui_cell_warn');
	     }
	     else{
	       $(this).closest('.weui_cell').removeClass('weui_cell_warn');
	     }
	  });
	})
	
	function commit() {
		var reg = /^\d+(\.\d+)?$/;
		if (!reg.test($("#days").val())) {
			alert("请假天数:只能输入数值，可以是小数 ！");
			return false;
		}
		var id = $("#userid").val();
		
		var startTime=$("#startTime").val().replace(/(^\s*)|(\s*$)/g, "");
		if (startTime==""){
			alert("  请输入请假时间(起) -- 日期！");
			return false;
		}
		var startTime2=$("#startTime2").val().replace(/(^\s*)|(\s*$)/g, "");
		if (startTime2==""){
			alert("  请输入请假时间(起) -- 时间！");
			return false;
		}
		var endTime=$("#endTime").val().replace(/(^\s*)|(\s*$)/g, "");
		if (endTime==""){
			alert("  请输入请假时间(止) -- 日期！");
			return false;
		}
		var endTime2=$("#endTime2").val().replace(/(^\s*)|(\s*$)/g, "");
		if (endTime2==""){
			alert("  请输入请假时间(止) -- 时间！");
			return false;
		}
		
		startTime=startTime + " " + startTime2 +":00";
		endTime=endTime + " " + endTime2 +":00";
		
	 	//alert(startTime);
	 	//alert(endTime);
		
	     var values = {};

	     var fileName1="";
	     if (ImgList.length>=1)
	    	 fileName1=ImgList[0].FileName;
	     
	     var fileName2="";
	     if (ImgList.length>=2)
	    	 fileName2=ImgList[1].FileName;

	     var fileName3="";
	     if (ImgList.length>=3)
	    	 fileName3=ImgList[2].FileName;
	     
	    values["id"] = "0";
	    values["startTime"] = startTime;
	    values["endTime"] = endTime;
	    values["remark"] =  $("#remark").val();
	    values["days"] = $("#days").val();
	    
	    values["qingJiaTypeId"] = $("#qingJiaTypeId").val();
	    values["personId"] =  $("#userid").val();
	    values["picture"] = fileName1;
	    values["bak1"] = fileName2;
	    values["bak2"] = fileName3;
	
	    values["random"] = new Date();
	    
	    //alert(JSON.stringify(values));
    
		$.ajax({
			url : '../phone/weixinAdd',
			type : 'POST',
			dataType : "json",
			data : JSON.stringify(values),
			async : false,
			cache : false,
			contentType : "application/json", //不设置内容类型  
			success : function(data) {
				if (data.status == 200) {
					alert(data.message);
				} else {
					alert(data.message);
				}
			}
		});
	}

	</script>
</html>